<template>
  <el-card class="cardBox">
    <div slot="header" class="imageWrapper">
      <img src="/static/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png" class="image">
    </div>
    <div class="progresses">
      <div class="thumb">
        <img src="/static/avatar.gif">
      </div>
      <div class="progress">
        <span>Vue</span>
        <el-progress :percentage="70"></el-progress>
      </div>
      <div class="progress">
        <span>Javascript</span>
        <el-progress :percentage="18"></el-progress>
      </div>
      <div class="progress">
        <span>Css</span>
        <el-progress :percentage="12"></el-progress>
      </div>
      <div class="progress">
      <span>ESLint</span>
      <el-progress :percentage="12"></el-progress>
    </div>
    </div>
  </el-card>
</template>

<script>
    export default {
        name: "cardBox"
    }
</script>

<style lang="scss" scoped>
  .cardBox{
    .imageWrapper {
      margin: -18px -20px;
      .image {
        display: block;
        width: 100%;

        &:hover{
          transform: scale(1.10, 1.10);
          filter: contrast(130%);
        }
        transition: all 0.2s ease;
      }
    }

    .progresses {
      margin-top: 40px;
      position: relative;
      .thumb{
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #fff;

        cursor: pointer;

        top: -90px;
        box-shadow: 0 0 0 6px #fff;

        &:hover{
          img {
            transform: rotateZ(-110deg);
          }
        }

        img{
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;

          transform-origin: 95% 40%;
          transition: transform 0.3s ease-in-out;
        }
      }
      .progress {
        margin-bottom: 10px;
      }
    }
  }
</style>
